<template>
  <div>
    <div id="bor">
      <el-carousel :interval="4000" type="card" height="230px">
        <el-carousel-item v-for="(item, index) in getimgs.imgs" :key="index">
          <!-- <img :src="item.img" fit="fill" /> -->
          <el-image :src="item.img" :fit="cover"></el-image>
          <!-- <h3 class="medium">{{ item }}</h3> -->
        </el-carousel-item>
      </el-carousel>
    </div>
    <div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全部" name="first">
          <el-table
            :data="[...tableData1, ...tableData2, ...tableData]"
            style="width: 100%"
          >
            <el-table-column prop="date" label="类型" width="300px">
            </el-table-column>
            <el-table-column prop="name" label="标题" width="500px">
            </el-table-column>
            <el-table-column prop="name" label="查看详情" width="100px">
              <el-button type="text" @click="dialogVisible = true"
                >查看</el-button
              >
              <el-dialog
                title="出现这五类症状，应高度警惕新型肺炎"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose"
              >
                <span>hhhhh</span>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="dialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="dialogVisible = false"
                    >确 定</el-button
                  >
                </span>
              </el-dialog>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="症状表现" name="second">
          <el-table :data="tableData1" style="width: 100%">
            <el-table-column prop="date" label="类型" width="300px">
            </el-table-column>
            <el-table-column prop="name" label="标题" width="400px">
            </el-table-column>
            <el-table-column prop="name" label="查看详情" width="100px">
              <el-button type="text" @click="dialogVisible = true"
                >查看</el-button
              >
              <el-dialog
                title="出现这五类症状，应高度警惕新型肺炎"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose"
              >
                <span>hhhhh</span>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="dialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="dialogVisible = false"
                    >确 定</el-button
                  >
                </span>
              </el-dialog>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="如何预防" name="third">
          <el-table :data="tableData2" style="width: 100%">
            <el-table-column prop="date" label="类型" width="300px">
            </el-table-column>
            <el-table-column prop="name" label="标题" width="500px">
            </el-table-column>
            <el-table-column prop="name" label="查看详情" width="100px">
              <el-button type="text" @click="dialogVisible = true"
                >查看</el-button
              >
              <el-dialog
                title="出现这五类症状，应高度警惕新型肺炎"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose"
              >
                <span>hhhhh</span>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="dialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="dialogVisible = false"
                    >确 定</el-button
                  >
                </span>
              </el-dialog>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="防疫焦点" name="fourth">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="类型" width="300px">
            </el-table-column>
            <el-table-column prop="name" label="标题" width="500px">
            </el-table-column>
            <el-table-column prop="name" label="查看详情" width="100px">
              <el-button type="text" @click="dialogVisible = true"
                >查看</el-button
              >
              <el-dialog
                title="出现这五类症状，应高度警惕新型肺炎"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose"
              >
                <span>hhhhh</span>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="dialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="dialogVisible = false"
                    >确 定</el-button
                  >
                </span>
              </el-dialog>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class=""></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      getimgs: {
        imgs: [
          {
            img:
              "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=62677489,2455322128&fm=26&gp=0.jpg",
          },
          {
            img:
              "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3712746449,2985347718&fm=26&gp=0.jpg",
          },
          {
            img:
              "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1216206478,2847303965&fm=26&gp=0.jpg",
          },
        ],
      },
      tableData: [
        {
          date: "防疫焦点",
          name: "为什么今年新冠，特别需要接种流感疫苗？",
          message: "hhh",
        },
        {
          date: "防疫焦点",
          name: "预防肺炎戴过的口罩，该怎么仍才不容易感染？",
          message: "",
        },
        {
          date: "防疫焦点",
          name: "三文鱼会感染新冠病毒吗？",
          message: "",
        },
        {
          date: "防疫焦点",
          name: "新冠症状新发现：“快乐缺氧”或致患者突然死亡",
          message: "",
        },
      ],
      tableData1: [
        {
          date: "症状表现",
          name: "出现这五类症状，应高度警惕新型肺炎",
        },
        {
          date: "症状表现",
          name: "新型冠状病毒是什么",
        },
        {
          date: "症状表现",
          name: "咳嗽、发烧是否一定感染新冠",
        },
        {
          date: "症状表现",
          name: "新冠症状新发现：“快乐缺氧”或致患者突然死亡",
        },
      ],
      tableData2: [
        {
          date: "如何预防",
          name: "中国疾控中心提示：正确使用消毒剂",
        },
        {
          date: "如何预防",
          name: "防范新型冠状病毒48字守则",
        },
        {
          date: "如何预防",
          name: "四个常见预防误区",
        },
        {
          date: "如何预防",
          name: "公共场所预防指南",
        },
      ],

      activeName: "first",
    };
  },
  computed: {},
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
  dialogVisible: false,
  handleClick(tab, event) {
    console.log(tab, event);
  },
  opendialog(row, event) {
    console.log(row, event);
  },

  created() {},
  mounted() {},
};
</script>
<style scoped>
#bor {
  text-align: center;
  font-size: 20px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>